<template>
  <div class="table-right flex-a-center">
    <div class="time-text">
      <span class="timeTextSpan" v-for="(item, index) of h">{{ item }}</span>
      <span class="timeTextSpan1">:</span>
      <span class="timeTextSpan" v-for="(item, index) of m">{{ item }}</span>
      <span class="timeTextSpan1">:</span>
      <span class="timeTextSpan" v-for="(item, index) of s">{{ item }}</span>
    </div>
  </div>
</template>
<script>
import moment from "moment";
export default {
  props: {
    endTime: {}, //接收得最后时间 2021-12-17 16：29：20
  },
  data() {
    //这里存放数据
    return {
      h: "00",
      m: "00",
      s: "00",
      timer: null,
    };
  },
  watch: {
    endTime: {
      handler(e) {
        if (e) {
          let self = this;
          clearInterval(this.timer);
          this.timer = setInterval(function () {
            self.init();
          }, 1000);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    let self = this;
    self.init();
    clearInterval(this.timer);
    this.timer = setInterval(function () {
      self.init();
    }, 1000);
  },
  //方法集合
  methods: {
    init() {
      let time = moment(this.endTime).diff(moment());
      if (time <= 0) {
        clearInterval(this.timer);
        this.onOver();
        return;
      }
      let t = time / 1000;
      let d = Math.floor(t / (24 * 3600)); //剩余天数，如果需要可以自行补上
      let h = Math.floor((t - 24 * 3600 * d) / 3600) + d * 24; //不需要天数，把天数转换成小时
      let _h = Math.floor((t - 24 * 3600 * d) / 3600); //保留天数后得小时
      let m = Math.floor((t - 24 * 3600 * d - _h * 3600) / 60);
      let s = Math.floor(t - 24 * 3600 * d - _h * 3600 - m * 60);

      this.h = String(h).length == 1 ? "0" + String(h) : String(h);
      this.m = String(m).length == 1 ? "0" + String(m) : String(m);
      this.s = String(s).length == 1 ? "0" + String(s) : String(s);
    },
    onOver() {
      this.$emit("over"); //倒计时结束得回调
    },
  },
  beforeDestroy() {
    this.timer = null;
    clearInterval(this.timer);
  },
};
</script>
<style lang="less" scoped>
.table-right {
  font-size: 12px;
  color: #757e8a;
  .timeTextSpan {
    display: inline-block;
    width: 14px;
    height: 22px;
    text-align: center;
    border-radius: 2px;
    margin-right: 2px;
    font-size: 16px;
    color: red;
  }
  .timeTextSpan1 {
    display: inline-block;
    width: 14px;
    text-align: center;
    vertical-align: bottom;
    color: #202d40;
    font-size: 16px;
    font-weight: bold;
  }

  .time-text {
    margin-left: 10px;
  }
}
</style>
